<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item v-show="false">
          <a-input v-decorator="['id']"/>
        </a-form-item>
        <a-form-item v-show="false">
          <a-input v-decorator="['parent']"/>
        </a-form-item>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="按钮名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-select placeholder="请输入按钮名称" allow-clear mode="combobox"
                        v-decorator="['title', {rules: [{required: true, message: '请输入按钮名称！'}]}]">
                <a-select-option v-for="item in titleList" :key="item" :value="item">{{ item
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              style="width: 100%"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="权限标识"
              hasFeedback
            >
              <a-input
                placeholder="请输入按钮权限标识"
                v-decorator="[
                                    'permission',
                                    { rules: [{ required: true, message: '请输入按钮权限标识！' }] },
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="请求方式" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-select placeholder="请输入请求方式" allow-clear
                        v-decorator="['method', {rules: [{required: true, message: '请输入请求方式！'}]}]">
                <a-select-option v-for="item in methodList" :key="item.key" :value="item.value">{{ item.key
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="请求接口" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="请输入请求接口"
                v-decorator="[
                                    'api',
                                    { rules: [{ required: true, min: 1, message: '请输入请求接口！' }] },
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
              <a-input-number
                style="width: 100%"
                v-decorator="['sort', { initialValue: 100 }]"
                :min="1"
                :max="1000"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import * as api from '@/api/system/buttonManage'
  import config from '@/config/dict'

  const titleList = ['新增', '修改', '查询', '删除', '单例']
  const methodList = [
    {
      'key': 'GET',
      'value': 0
    },
    {
      'key': 'POST',
      'value': 1
    },
    {
      'key': 'PUT',
      'value': 2
    },
    {
      'key': 'DELETE',
      'value': 3
    }
  ]
  export default {
    name: 'buttonForm',


    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        title: '',
        titleList,
        methodList,
        confirmLoading: false,
        formLoading: true,
        message: {},
        form: this.$form.createForm(this)
      }
    },

    methods: {
      // 打开页面初始化
      open(record, type) {
        this.visible = true
        // 编辑
        if (type === 'edit') {
          this.title = '编辑按钮'
          this.$nextTick(() => {
            setTimeout(() => {
              this.setMenuItem(record)
            }, 100)
          })
          // 新增
        } else {
          this.title = '新增按钮'
          this.form.getFieldDecorator('parent', { initialValue: record.id })
        }
        this.formLoading = false
      },

      setMenuItem(record) {
        this.form.setFieldsValue({
          id: record.id,
          title: record.title,
          name: record.name,
          permission: record.permission,
          api: record.api,
          method: record.method,
          sort: record.sort,
          type: record.type
        })
        this.form.getFieldDecorator('parent', { initialValue: record.parent })
      },
      handleSubmit() {
        const {
          form: { validateFields }
        } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            this._commitData(values)
          } else {
            this.confirmLoading = false
          }
        })
      },
      // 新增或编辑数据
      _commitData(values) {
        if (values.id) {
          this.message = config.msgDict[1]
          api.updateObj(values)
            .then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success(this.message['success'])
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(this.message['failed'] + res.message)
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        } else {
          this.message = config.msgDict[0]
          api.addObj(values)
            .then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success(this.message['success'])
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(this.message['failed'] + res.message)
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        }
      },
      handleCancel() {
        this.form.resetFields()
        this.confirmLoading = false
        this.visible = false
      }
    }
  }
</script>